<template>
  <div>
    <Card :bordered="false">
      <tables
        ref="tables"
        editable
        searchable
        v-model="tableData"
        :columns="columns"
        :addable="addable"
        :addButtonName="addButtonName"
        :ckPermission="['task.add']"
        remoteSearch
        @handleAdd="handleAdd"
        @handleRemoteSearch="handleRemoteSearch"
      />
    </Card>
    <Page
      style="margin-top: 12px"
      :total="total"
      :current="page"
      size="small"
      :page-size="pageSize"
      @on-change="handlePageChange"
      show-total
    />
    <DeleteModal
      :modalVisible="modalVisible"
      :modalLoading="modalLoading"
      :deleteId="deleteId"
      @handleDelete="handleDelete"
      @handleChangeVisible="handleChangeVisible"
    />
  </div>
</template>

<script>
  import Tables from '_c/tables'
  import DeleteModal from '_c/delete-modal'
  import Detection from '@/view/project/component/detection'
  import { task, audit, deleteTask, rollbackTask } from '@/api/task'
  import { setCookie, getCookie } from '@/libs/cookie'
  import Bus from '@/bus'

  export default {
    name: 'list',
    components: {
      Tables,
      DeleteModal,
      Detection
    },
    mounted () {
      Bus.$on('handelFlashDeployList', () => {
        this.handleGetTaskList({ page: 1, pageSize: this.pageSize })
      })
      this.page = Number(getCookie('task_page')) || 1
      this.handleGetTaskList({ page: this.page, pageSize: this.pageSize })
    },
    data () {
      return {
        modalVisible: false,
        modalLoading: false,
        deleteId: 0,
        showModal: false,
        projectId: 0,
        addable: true,
        addButtonName: '新建上线单',
        Steps: [],
        usersData: [],
        formData: {},
        total: 0,
        page: 1,
        pageSize: 10,
        columns: [
          {
            title: '项目',
            key: 'project_name',
            fixed: 'left',
            align: 'left',
            minWidth: 150,
            render: (h, params) => {
              return h('span', params.row.project_name + '-' + params.row.env_name)
            }
          },
          { title: '发起人', key: 'user_name', hiddenSearch: true, align: 'center', minWidth: 100 },
          { title: '上线单标题', key: 'title', hiddenSearch: true, align: 'center', minWidth: 150 },
          { title: '上线分支/Tag', key: 'branch', hiddenSearch: true, align: 'center', minWidth: 150 },
          { title: '上线commit号', key: 'commit_id', hiddenSearch: true, align: 'center', minWidth: 150 },
          {
            title: '全量/增量',
            hiddenSearch: true,
            minWidth: 150,
            key: 'file_transmission_mode',
            align: 'center',
            render: (h, params) => {
              let _status = params.row.file_transmission_mode === 1 ? '全量' : '增量'
              return h('span', _status)
            }
          },
          {
            title: '状态',
            hiddenSearch: true,
            minWidth: 150,
            align: 'center',
            key: 'status',
            render: (h, params) => {
              let _status, _color = '#9BC585'
              switch (params.row.status) {
                case 0:
                  _status = '待审核'
                  _color = '#8A6D3B'
                  break
                case 1:
                  _status = '审核通过'
                  _color = '#438EB9'
                  break
                case 2:
                  _status = '审核拒绝'
                  _color = '#8A6D3B'
                  break
                case 3:
                  _status = '上线完成'
                  _color = '#45A87B'
                  break
                case 4:
                  _status = '上线失败'
                  _color = '#B24A4A'
                  break
              }
              return h('span', {
                style: {
                  color: _color
                }

              }, _status)
            }
          },
          {
            title: '灰度发布',
            hiddenSearch: true,
            key: 'gray_push',
            minWidth: 100,
            align: 'center',
            render: (h, params) => {
              let _status = params.row.gray_push === 1 ? '是' : '否'
              return h('span', {
                style: {
                  color: params.row.gray_push === 1 ? '#2D8CF0' : ''
                }
              }, _status)
            }
          },
          { title: '本次软链号', key: 'link_id', hiddenSearch: true, align: 'center', minWidth: 150 },
          { title: '上次软链号', key: 'ex_link_id', hiddenSearch: true, align: 'center', minWidth: 150 },
          {
            title: '操作',
            key: 'handle',
            minWidth: 146,
            align: 'center',
            fixed: 'right',
            button: (h, params) => {
              let arr = []
              //可以上线
              if (params.row.status === 1 || params.row.status === 4) {
                arr.push(
                  h('a', {
                      attrs: {
                        title: '上线',
                      },
                      style: {
                        marginRight: '8px',
                        color: '#45A87B'
                      },
                      on: {
                        click: () => {
                          this.onDeploy(params.row.id)
                        }
                      },
                      directives: [{ name: 'can', value: ['task.upload'] }]
                    },
                    [
                      h('icon', {
                        props: {
                          type: 'md-cloud-upload',
                          size: '20',
                        },
                      }),
                    ]),
                )
              }
              //查看详情
              if (params.row.status === 3 || params.row.status === 4) {
                arr.push(
                  h('a', {
                      attrs: {
                        title: '查看详情',
                      },
                      style: {
                        marginRight: '8px',
                        color: '#2D8CF0'
                      },
                      on: {
                        click: () => {
                          this.onDeploy(params.row.id)
                        }
                      },
                      directives: [{ name: 'can', value: ['task.show'] }]
                    },
                    [
                      h('icon', {
                        props: {
                          type: 'md-search',
                          size: '20',
                        },
                      }),
                    ]),
                )
              }
              //可以回滚
              if (params.row.status === 3 && params.row.enable_rollback === 1) {
                arr.push(
                  h('a', {
                      attrs: {
                        title: '回滚',
                      },
                      style: {
                        marginRight: '8px',
                        color: '#B14949'
                      },
                      on: {
                        click: () => {
                          this.onRollback(params.row.id)
                        }
                      },
                      directives: [{ name: 'can', value: ['task.rollback'] }]
                    },
                    [
                      h('icon', {
                        props: {
                          type: 'ios-redo',
                          size: '20',
                        },
                      }),
                    ]),
                )
              }
              //可以删除
              if (params.row.status !== 3) {
                arr.push(
                  h('a', {
                      attrs: {
                        title: '删除',
                      },
                      style: {
                        color: '#B14949',
                        marginRight: '8px'
                      },
                      on: {
                        click: () => {
                          this.onDelete(params.row.id)
                        }
                      },
                      directives: [{ name: 'can', value: ['task.delete'] }]
                    },
                    [
                      h('icon', {
                        props: {
                          type: 'md-trash',
                          size: '18',
                        },
                      }),
                    ],)
                )
              }
              //需要审核
              if (params.row.audit === 1) {
                if (params.row.status === 1 || params.row.status === 0 && params.row.showAudit === 1) {
                  arr.push(
                    h('i-switch', {
                        props: {
                          type: 'primary',
                          size: 'large',
                          trueColor: '#45A87B',
                          falseColor: '#CCCCCC',
                          value: params.row.status !== 0,
                        },
                        on: {
                          'on-change': () => {
                            this.onChange(params.row.id)
                          }
                        },
                        directives: [{ name: 'can', value: ['task.audit'] }]
                      },
                      [
                        h('span', { slot: 'open' }, '通过'),
                        h('span', { slot: 'close' }, '待审')
                      ],
                    ),
                  )
                }
              } else {
                if (params.row.status === 1 || params.row.status === 0) {
                  arr.push(
                    h('i-switch', {
                      props: {
                        type: 'primary',
                        size: 'large',
                        disabled: 'disabled',
                        trueColor: '#9BC585',
                        falseColor: '#CCCCCC',
                        value: true,
                      },
                      directives: [{ name: 'can', value: ['task.audit'] }]
                    }, [h('span', { slot: 'open' }, '通过'), h('span', { slot: 'close' }, '待审')]),
                  )
                }

              }

              return h('div', arr)
            }
          }
        ],
        tableData: []
      }
    },
    methods: {
      onChange: function (val) {
        audit({ id: val }).then(res => {
          this.handleGetTaskList({ page: 1, pageSize: this.pageSize })
        })
        return false
      },
      onDeploy: function (id) {
        this.$router.push('/deploy/online/' + id)
      },
      onRollback: function (val) {
        rollbackTask({ id: val }).then(res => {
          this.handleGetTaskList({ page: 1, pageSize: this.pageSize })
        })
      },
      onDelete: function (id) {
        this.modalVisible = true
        this.deleteId = id
      },
      changeVisible: function (val) {
        this.showModal = val
      },
      detectionVisible: function (val) {
        this.detectionShow = val
      },
      handleChangeVisible: function (val) {
        this.modalVisible = val
      },
      handleDelete: function (id) {
        this.modalLoading = true
        deleteTask({ id: id }).then(res => {
          this.$Message.success(res.message)
          this.handleGetTaskList({ page: this.page, pageSize: this.pageSize })
        })
        setTimeout(() => {
          this.modalLoading = false
          this.modalVisible = false
        }, 2000)
      },
      handleGetTaskList: function (param = {}) {
        task(param).then(res => {
          this.tableData = res.data.list
          this.total = res.data.total
        })
      },
      handlePageChange: function (val) {
        setCookie('task_page', val)
        this.page = val
        this.handleGetTaskList({ page: val, pageSize: this.pageSize })
      },
      handleRemoteSearch: function (param) {
        this.page = param.page = 1
        param.pageSize = this.pageSize
        this.handleGetTaskList(param)
      },
      handleAdd: function () {
        this.$router.push('/deploy/submit')
      },
    }
  }
</script>

<style>
</style>
